
<template>

 <div class="table">
    <div class="crumbs">
        <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-tickets"></i>护士账户</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
              <!-- 表格 -->
    <div class="container">

        <!-- 查询区----start -->
       <el-form :label-position="labelPosition" :label-width="labelWidth" :inline="true" :model="formSearch" class="demo-form-inline">
            <el-form-item label="审批人">
                <el-input v-model="formSearch.user" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item label="活动区">
                <el-select v-model="formSearch.region" placeholder="活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="审批人">
                <el-input v-model="formSearch.user" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item label="审批人">
                <el-input v-model="formSearch.user" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item label="审批人">
                <el-input v-model="formSearch.user" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item label="审批人">
                <el-input v-model="formSearch.user" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item label="审批人">
                <el-input v-model="formSearch.user" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item label=" ">
                <el-button type="primary"  >查询</el-button>
            </el-form-item>
        </el-form>
        <!-- 查询区----end -->

        <el-row class="mgb15">
            <el-button size="small" round type="primary" @click="AddBeauty">新增</el-button>
            <el-button size="small" round type="danger" @click="deleteMany">删除/批量删除</el-button>
        </el-row>
        <br>
        <el-table  @select="selectionChange" :data="tableData"  tooltip-effect="dark"  border stripe align="center" header-align="center"	 style="width:100%">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="id" label="ID" width="180" sortable>
            </el-table-column>
            <el-table-column prop="BeautyTitle" label="标题" sortable >
            </el-table-column>
            <el-table-column prop="BeautyTime" label="日期" sortable >
            </el-table-column>
            <el-table-column prop="Beautyper" label="添加人" sortable >
            </el-table-column>
             <el-table-column   label="操作" sortable  fixed="right">
                <template slot-scope="scope" >
                    <el-button   size="mini"  type="primary" icon="el-icon-edit"  @click="handleEdit(scope.$index,scope.row)" >编辑</el-button>
                     <el-button  size="mini"  type="danger"  icon="el-icon-delete" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
   <br>
         <div class="block">

              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
              </el-pagination>
        </div>
    </div>

 </div>
</template>

<script>
export default {
  data () {
    return {
      dialogAddVisible: false,
      deleteMany: false,
      labelPosition: 'right', // lable对齐方式
      labelWidth: '60px', // lable宽度
      content: '',
      name: 'editor',
      formSearch: {
        // 表单对象
        user: '',
        region: ''
      },
      editorOption: {
        placeholder: '请输入内容'
      },
      tableData: [],
      multipleSelection: [],
      selectChangeId: [] // CheckId
    }
  },
  mounted () {
    //    if(this.$route.query.id==undefined|| this.$route.query.id==""){

    //    }
    this.getBeauty()
  },
  methods: {

    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    // 修改
    handleEdit (index, row) {
      //  console.log(index+"..."+row);
      this.$router.push({ path: '/BeautyEdit', query: { id: row.id } })
    },
    // 删除
    handleDelete (index, row) {
      this.post('Delete/' + row.id)
        .then(res => {
          if (res.data.code == 200) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getBeauty()
            })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                })
              })

            // this.$message({
            //   message: res.data.msg,
            //   type: "success"
            // });
          } else {
            this.$message({
              message: res.data.msg,
              type: 'err'
            })
          }
        })
        .catch(err => {})
    },
    selectionChange (val, row) {
      //  val 数组
      //  row 当前点击的行
      this.selectChangeId = []
      for (var i in val) {
        this.selectChangeId[i] = val[i].id
      }

      console.log(this.selectChangeId)
    },
    submit () {
      console.log(this.content)
      this.$message.success('提交成功！')
    },
    // 添加
    AddBeauty () {
      this.$router.push('/Beautyadd') // 将你的跳转写在这里。
    },

    getBeauty () {
      this.post('Beautylist', () => {})
        .then(resources => {
          if (resources.data.code == 200) {
            this.tableData = resources.data.Relust
          } else {
            this.$message({
              message: resources.data.msg,
              type: 'error'
            })
          }
        })
        .catch(err => {})
    }
  }
}
</script>

<style scoped>
    .block{

    }
</style>
